import './../css/index.less';
import './routes';
const Gv = require('./globalVar');
var IndexPage = function() {

	var that = this;
	var indexPage = $('.m-index');
	var btnVideo = indexPage.find('.btn-video');

	this.isinit = false;
	this.init = function() {
		this.isinit = true;

		btnVideo.on('click', function() {
			var vid = $(this).attr('data-vid');
			that.onVideo && that.onVideo(vid);
		});

		document.documentElement.addEventListener('touchmove', function(e) {
			e.preventDefault();
		})
	}

	this.show = function() {
		setTimeout(function() {
			indexPage.addClass('index-show');
		}, 200);
	}

	this.hide = function() {
		indexPage.removeClass('index-show');

	}
}

var IntroPage = function() {

	var introPage = $('.m-intro');
	var $tabLi = introPage.find('.tab-box .tab');
	var $contentBox = introPage.find('.content-box');
	var lastName = 'about';
	var currentTab = introPage.find('.tab-about');
	var lastContent = $contentBox.filter('[data-name="' + lastName + '"]');

	this.isinit = false;
	this.init = function() {
		this.isinit = true;

		$tabLi.each(function(i) {
			$(this).on('click', function(i) {
				var name = $(this).attr('data-name');
				if(lastName == name) return;

				var currentContent = $contentBox.filter('[data-name="' + name + '"]');

				lastContent.removeClass('show');

				$(this).addClass('current');
				currentTab.removeClass('current');
				currentTab = $(this);

				setTimeout((function(lfc, cl) {
					return function() {
						cl.show();
						cl.addClass('show');
					}
				})(lastContent, currentContent), 200);

				setTimeout((function(li) {
					return function() {
						li.fadeOut(200);
					}
				})(lastContent), 0);

				lastContent = currentContent;

				lastName = name;
			});
		});
	}

	this.show = function() {
		introPage.addClass('intro-show');
	}

	this.hide = function() {
		introPage.removeClass('intro-show');
	}
}

var MatchPage = function() {
	var matchPage = $('.m-match');
	var matchList = $('.match-list')
	var matchUl = matchPage.find('.match-list .list');
	var matchLi = matchUl.find('li')
	var matchNavList = matchPage.find('.match-nav .nav-el');
	var navCount = 0;
	//$('.match-list').scrollLeft(800);

	function isPassive() {
		var supportsPassiveOption = false;
		try {
			addEventListener("test", null, Object.defineProperty({}, 'passive', {
				get: function() {
					supportsPassiveOption = true;
				}
			}));
		} catch(e) {}
		return supportsPassiveOption;
	}

	var myScroll;
	
	function loaded() {
		var liMargin = parseFloat(matchLi.css('margin-left'));
		var liWidth = matchLi.width() + liMargin * 2;

		matchUl.css({
			width: ((liWidth + 1) * 13) + 'px'
		});
		myScroll = new IScroll('.match-list', { scrollX: true, scrollY: false, mouseWheel: true, click: true});
		
		myScroll.scrollTo(-liWidth * 6, 0);
	}

	document.addEventListener('touchmove', function(e) { e.preventDefault(); }, isPassive() ? {
		capture: false,
		passive: false
	} : false);
	
	
	//各个板块浮层部分
	var FloatMatch = function() {
		var that = this;
		Gv.FloatMatch = this;
		console.log(Gv.FloatMatch);
		var floatMatch = $('.m-match-float');
		var floatClose = floatMatch.find('.float-close a');
		var floatBox = floatMatch.find('.float-box');
		var matchAllLi = matchPage.find('.list li');

		var lastFloatContent = null;

		floatClose.on("touchstart", function() {
			that.hide();
		});

		this.isinit = false;
		this.init = function() {
			this.isinit = true;
			// matchAllLi.each(function(i) {
			// 	$(this).on('click', (function(n) {
			// 		return function() {
			// 			var name = $(this).attr('data-name');
			// 			that.show(name);
			// 		}
			// 	})(i));
			// });
		}
		this.show = function(name) {
			console.log('FloatMatchshow运行')
			let contentLi = floatBox.filter('[data-name="' + name + '"]');
			contentLi.show();
			floatMatch.show();
			setTimeout(function() {
				floatMatch.addClass('show');
				contentLi.addClass('show');
				// console.log(contentLi.hasClass('isScroll'), contentLi.find('.wrapper').length > 0);
				// if(!contentLi.hasClass('isScroll') && contentLi.find('.wrapper').length > 0) {
					// var myScroll = new IScroll(contentLi.find('.wrapper').get(0), {
					// 	click: true,
					// 	scrollbars: 'custom'
					// });
					// contentLi.addClass('isScroll');
				// }
			}, 100);

			lastFloatContent = contentLi;
		}

		this.hide = function() {
			lastFloatContent.removeClass('show');
			floatMatch.removeClass('show');
			setTimeout(function() {
				lastFloatContent.hide();
				floatMatch.hide();
			}, 500);
		}
	}

	var floatMatch = new FloatMatch();

	var showList = function(list, step, delay) {
		var step = (typeof step) == 'number' ? step : 100;
		var delay = (typeof delay) == 'number' ? delay : 0;

		for(var i = 0; i < list.length; i++) {
			(function(n) {
				setTimeout(function() {
					list.eq(n).addClass('show');
				}, (n * step + delay));
			})(i);
		}
	}
	var hideList = function(list) {
		for(var i = 0; i < list.length; i++) {
			list.eq(i).removeClass('show');
		}
	}
	this.isinit = false;
	this.init = function() {
		this.isinit = true;

		floatMatch.init();
		//小导航
		matchNavList.each(function(i) {
			$(this).on('click', (function(n) {
				return function() {
					if(navCount == n) return;
					matchUl.eq(navCount).hide();
					hideList(matchUl.eq(navCount).find('li'));
					matchNavList.eq(navCount).removeClass('current');

					matchUl.eq(n).show();
					showList(matchUl.eq(n).find('li'), 100, 100);
					matchNavList.eq(n).addClass('current');
					navCount = n;
				}
			})(i));
		});
	}
	this.show = function() {
		hideList(matchUl.eq(navCount).find('li'));
		matchPage.addClass('match-show');
		showList(matchUl.eq(navCount).find('li'), 100, 600);
	}
	this.hide = function() {
		matchPage.removeClass('match-show');
		hideList(matchUl.eq(navCount).find('li'));
		// floatMatch.hide();
	}
	//$(document).on('resize', resizeFn);
	// var resizeFn = function(){
	var docEl = document.documentElement;
	//console.log(docEl.clientWidth)
	var ratio = document.documentElement.clientWidth / 375;
	docEl.style.fontSize = 100 * ratio + "px";
	//}

	loaded()
}
// 大师联盟部分
var MasterPage = function() {
	var that = this;
	var masterPage = $('.m-master');
	var masterBox = masterPage.find('.list');
	var masterList = masterPage.find('.list.show li');
	var mList = masterPage.find('.list li');
	var navList = masterPage.find('.master-nav li');
	navList.on('click', function (){
		console.log(this);
		var index = $(this).index();
		masterList = masterBox.eq(index).find('li');
		$(this).addClass('active').siblings().removeClass('active');
		masterBox.eq(index).addClass(function () {
			that.show();
			return 'show';
		}).siblings().removeClass('show');
	});
	var showList = function(list, step, delay) {
		var step = (typeof step) == 'number' ? step : 100;
		var delay = (typeof delay) == 'number' ? delay : 0;

		for(var i = 0; i < list.length; i++) {
			(function(n) {
				setTimeout(function() {
					list.eq(n).addClass('show');
				}, (n * step + delay));
			})(i);
		}
	}
	var hideList = function(list) {
		console.log(list);
		for(var i = 0; i < list.length; i++) {
			list.eq(i).removeClass('show');
		}
	}

	this.isinit = false;
	this.init = function() {
		this.isinit = true;
	}

	this.show = function() {
		// hideList(mList);
		// that.hide();
		//MasterList.addClass('match-show');
		showList(masterList, 100, 600);
	}

	this.hide = function() {
		//MasterList.removeClass('match-show');
		hideList(mList);
	}
}

var ReviewPage = function() {
	var that = this;
	var reviewPage = $('.m-review');
	var $reviewLi = reviewPage.find('.review-nav li');
	var $reviewBox = reviewPage.find('.review-box .review-des');
	var lastFloatContent = null;
	var currentNav = null;
	var lastName = '2012';
	var $contentLi = $reviewBox.filter('[data-name="' + lastName + '"]');
	var videoEls = reviewPage.find('.review-video');

	this.isinit = false;
	this.init = function() {
		this.isinit = true;
		$contentLi.show();
		currentNav = $reviewLi.eq(0);

		$reviewLi.each(function(i) {
			$(this).on('click', function(i) {
				var name = $(this).attr('data-name');
				if(lastName == name) return;

				var $contentLi = $reviewBox.filter('[data-name="' + name + '"]');

				lastFloatContent.removeClass('show');

				$(this).addClass('current');
				currentNav.removeClass('current');
				currentNav = $(this);

				$contentLi.show();
				setTimeout((function(lfc, cl) {
					return function() {
						cl.addClass('show');
					}
				})(lastFloatContent, $contentLi), 200);

				setTimeout((function(li) {
					return function() {
						li.fadeOut(200);
					}
				})(lastFloatContent), 0);

				lastFloatContent = $contentLi;

				lastName = name;
			});
		});

		videoEls.each(function(i) {
			$(this).on('click', function() {
				var vid = $(this).attr('data-vid');
				that.onVideo && that.onVideo(vid);
			});
		});
	}

	this.show = function() {
		lastFloatContent = $contentLi;
	}

	this.hide = function() {

	}
}

var SupportPage = function() {
	this.isinit = false;
	this.init = function() {
		this.isinit = true;

		var $tabLi = $('.m-support').find('.tab-box .tab');
		var $contentLi = $('.m-support').find('.support-box')
		var lastName = 'wb';
		var lastContent = $contentLi.filter('[data-name="' + lastName + '"]');
		var currentNav = $('.tab-wb');

		$tabLi.each(function(i) {
			$(this).on('click', function(i) {
				var name = $(this).attr('data-name');
				if(lastName == name) return;

				var contentNow = $contentLi.filter('[data-name="' + name + '"]');

				lastContent.removeClass('show');

				$(this).addClass('current');
				currentNav.removeClass('current');
				currentNav = $(this);

				contentNow.show();
				setTimeout((function(lfc, cl) {
					return function() {
						cl.addClass('show');
					}
				})(lastContent, contentNow), 200);

				setTimeout((function(li) {
					return function() {
						li.fadeOut(200);
					}
				})(lastContent), 0);

				lastContent = contentNow;

				lastName = name;
			});
		});
	}

	this.show = function() {

	}

	this.hide = function() {

	}
}
// loading 进度
var LoadPage = function() {
	var that = this;

	var loadPage = $('.m-loading');
	var processLineEl = loadPage.find('.loadProcess .inner');
	var gload = null;

	this.isinit = false;

	this.init = function() {
		this.isinit = true;

		gload = new Preload(Config.pageImgs);

		gload.onloading = function(p) {
			//processEl.text(p+'%');
			processLineEl.css('width', p + '%');
		};

		gload.onload = function() {
			//进度应该不用暴露出来
			that.hide();
		};

		gload.onfail = function(msg) {
			console.log(msg);
		};

		gload.load();
	}

	this.show = function() {

	}
	this.hide = function() {
		 loadPage.hide();
		 that.onhide && that.onhide();
	}
}

var Stage = function(stageEl) {
	var that = this;
	var btnMenuOpen = $('.btn-menu-open');

	var pages = {};
	pages.load = new LoadPage(this);
	pages.index = new IndexPage(this);
	pages.intro = new IntroPage(this);
	pages.match = new MatchPage(this);
	pages.master = new MasterPage(this);
	pages.review = new ReviewPage(this);
	pages.support = new SupportPage(this);

	this.pages = pages;

	this.swipe = null;

	this.init = function() {
		var body = $('body');
		body.get(0).addEventListener('touchstart', function() {
			return false;
		})

		for(var prop in pages) {
			pages[prop].init();
		}

		pages.load.onhide = function() {
			pages.index.show();
		}

		btnMenuOpen.on('touchstart', function() {
			that.onOpenMenu && that.onOpenMenu();
		});
		
            	
            	
     
		this.swipe = new Swipe(stageEl, {
			//startSlide:2,nav
			continuous: false,
			speed: 600,
			//nav: true,
			disableScroll: false,
			callback: function(index, elem, direction) {
				var pageName = $(elem).attr('data-page');
				pages[pageName].show();
				//耦合
				nav.change(index);

			},
			outback: function(index, elem) {

				var pageName = $(elem).attr('data-page');

				pages[pageName].hide();

			}

		});
		
		
	}
	this.init();
}
// 导航
var Nav = function() {
	var that = this;
	var navEl = $('.m-menu');
	var menuClose = navEl.find('.btn-menu-close');
	var btnReg = navEl.find('.btn-join');
	var navList = navEl.find('.menu-list li');
	var count = 0;
	var menuList = navEl.find('.menu-list li');
	this.init = function() {
		navList.each(function(i) {
			$(this).on('click', (function(n) {
				return function(e) {
					if(count == n) {
						that.hide();
						return;
					}
					that.hide();
					setTimeout(function() {
						that.onswipe && that.onswipe(n);
					}, 500);
				}
			})(i))
		});

		menuClose.on('touchstart', function() {
			that.hide();
		});
		/*menuList.on('touchstart', function () {
		    $(this).addClass('hover');
		})
		menuList.on('touchend', function () {
		    $(this).removeClass('hover');
		})*/
		btnReg.on('click', function() {
			that.hide();
			setTimeout(function() {
				that.onswipe && that.onswipe(2);
			}, 500);
		});
	}
	this.show = function() {
		navEl.addClass('show');
	}
	this.hide = function() {
		navEl.removeClass('show');
	}
	this.change = function(i) {
		$('.m-menu li').eq(i).addClass('current')
		$('.m-menu li').eq(count).removeClass('current');
		count = i;
	}

	this.init();
}

var Video = function() {
	var floatVideo = $('.m-float-video');
	var btnClose = floatVideo.find('.btn-close');

	var video = new tvp.VideoInfo();
	var player;

	btnClose.on('click', function() {
		player.pause();
		floatVideo.hide();
	})

	this.show = function(vid) {
		//video.setVid(vid);
		floatVideo.show();
		video.setVid(vid);
		player = new tvp.Player();
		player.create({
			width: '100%',
			height: '100%',
			video: video,
			modId: "mod_player",
			autoplay: true
			//mod_player是刚刚在页面添加的div容器 autoplay:true
		});
	}
}

var stage = new Stage($('.m-swipe-box').get(0));
var nav = new Nav();
var video = new Video();

nav.onswipe = function(n) {
	stage.swipe.slide(n);
	//nav.change(n);
}
console.log(stage);
stage.onOpenMenu = function() {
	nav.show();
}
stage.pages.review.onVideo = function(vid) {
	video.show(vid);
}
stage.pages.index.onVideo = function(vid) {
	video.show(vid);
}